<template>
	<div>
		<!--查询条件-->
		<wsPanel v-if="showQuery" class="panel-query">
			<div slot="panel_head_title"><Icon type="md-search" size="20"></Icon><span>筛选查询</span></div>
			<div slot="panel_head_operate">
				<span class="panel-operate-arrow" @click="arrowToggle"><Icon type="ios-arrow-up"></Icon><span>收起筛选</span></span>
				<span>
					<ButtonGroup>
						<Button @click="simpleQuery">查询结果</Button>
						<Button v-if="showHighQuery" @click="highQuery">高级检索</Button>
					</ButtonGroup>
				</span>
			</div>
			<div slot="panel_body" v-show="showQueryForm">
				<div class="panel-query-form">
					<slot name="query_form"></slot>	
				</div>
			</div>
		</wsPanel>
		<!-- 添加banner -->
		<wsPanel v-if="showAddBanner" class="panel-query">
			<div slot="panel_head_title"><Icon type="md-add" size="20"></Icon><span>添加banner</span></div>
			<div slot="panel_body">
				<slot name="add_banner"></slot>
			</div>
		</wsPanel>	
		<!-- 活动内容 -->
		<wsPanel v-if="showActiveContent" class="panel-query">
			<div slot="panel_head_title"><span>活动内容</span></div>
			<div slot="panel_body">
				<slot name="active_content"></slot>
			</div>
		</wsPanel>
		<!-- 活动设置 -->
		<wsPanel v-if="false" class="panel-query">
			<div slot="panel_head_title"><span>活动设置</span></div>
			<div slot="panel_body">
				<slot name="active_setting"></slot>
			</div>
		</wsPanel>
		<!--数据区域-->
		<wsPanel v-if="showDataArea">
			<div slot="panel_head_title"><Icon type="md-grid" size="20"/><span>{{dataTitle}}</span></div>
			<div slot="panel_head_operate">
				<slot name="list_operate"></slot>
			</div>
			<div slot="panel_body">
				<slot name="list_data"></slot>			
			</div>	
			<div slot="panel_bottom" v-if="page">
				<div class="panel-page"><Page :current="page.pageNum" :total="page.total" :page-size="page.pageSize" placement="top" show-total show-elevator show-sizer size="small" @on-change="pageChange" @on-page-size-change="pageSizeChange"></Page></div>				
			</div>
		</wsPanel>
	</div>
</template>

<script>
	import wsPanel from '../../panel/';
    export default {
    	components: {
    		wsPanel
    	},
    	props: {
    		//是否显示高级查询
    		showHighQuery: {
    			type: Boolean,
    			default: false
    		},
    		page: {
    			type:Object,
    		},
    		//数据列表的title
    		dataTitle: {
    			type: String,
    			default: '数据列表'
    		}
    	}, 	
        data () {
            return {
            	showQueryForm: true
            }
        },
        mounted() {
			// console.log(this.$router.currentRoute.path);
        },
        computed: {
        	/**
        	 * 是否显示查询区域(根据查询区域的FORM表单是否存在处理)
        	 */
        	showQuery() {
        		return this.$slots.query_form !== undefined;
			},
			showAddBanner(){
				return this.$router.currentRoute.path == '/recoManager/addReco';
			},
			showActiveContent(){
				return this.$router.currentRoute.path == '/activities/addActivities';
			},
			showActiveSetting(){
				return this.$router.currentRoute.path == '/activities/addActivities';
			},
			showDataArea(){
				return this.$router.currentRoute.path !=='/activities/addActivities';
			}
        },         
        methods: {
        	//切换查询面板显示隐藏
        	arrowToggle() {
        		this.showQueryForm = !this.showQueryForm;
        	},
        	//高级查询
        	highQuery() {
        		this.$emit('high-query');
        	},
        	//简单查询
        	simpleQuery() {
        		this.$emit('simple-query');
        	},
        	//分页改变
        	pageChange(pageIndex) {
        		this.page.pageNum = pageIndex;
        		this.$emit('page-change', this.page);
        	},
        	//分页条数改变事件
        	pageSizeChange(pageSize) {
        		this.page.pageSize = pageSize;
        		//同时会触发分页改变事件，此处不需要单独发送消息
     		this.$emit('page-change', this.page);
        	}
        }
    }		
</script>

<style scoped>
	.panel-query {
		margin-bottom: 15px;
	}
	.panel-query-form {
		padding-top: 20px;
	}
	.panel-operate-arrow {
		margin-right: 15px;
		cursor: pointer;
	}
	.panel-page {
		float: right;
	}
	.ivu-icon+span {
		margin-left: 6px;
	}
</style>